<!-- reportingResults -->
<template>
    <div class="page">
        <!-- 导航栏 -->
        <div class="navBar">
            <customNavBar :leftTetx=leftTetx :titleTest=titleTest></customNavBar>
        </div>
        <!-- 页面内容 -->
        <div class='generation' v-if="imageBase64">
            <img :src="imageBase64" alt="">
        </div>
        <div ref='divContainer' class="content" v-else>
            <div class='contenttop'>
                <img :src="fxhb || viewReport" alt="">
            </div>
            <div class='contentbottm'>
                <div class='contentbottmTopp'>
                    <div class='contentbottmt'>
                        <div>保单</div>
                        <div>检视</div>
                    </div>
                    <div class='contentbottmc'>
                        <div>保单检视</div>
                        <div>您身边的保障体检专家</div>
                    </div>
                </div>
                <div class='contentbottmb'>
                    <qrcode-vue
                        style="width: 100%; height: 100%; margin: auto;"
                        :value="value"
                        :level="'L'"
                        :foreground="color"
                    />
                </div>
            </div>
        </div>
        <div class='cbottom'>
            <div class='cbottomz' @click="goWx()">
                <img src="../../assets/img/tast/wxs.png" alt="">
                <div>微信</div>
            </div>
            <div class='cbottomz' @click="saveBum()">
                <img src="../../assets/img/tast/x.png" alt="">
                <div>保存相册</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup name="reportingResulbh">
import { useRouter, useRoute } from "vue-router"
import { Toast } from '/@/utils/Message';
import { onMounted } from "vue"
import { reactive, ref } from 'vue'
import customNavBar from "/src/components/NavBar/customNavBar.vue"
import viewReport from "../../assets/img/tast/jxs.png"
import fxhb from "../../assets/img/tast/fxhb.jpg"
import { shareLink } from "/@/api/auth/repot"
import QrcodeVue from "qrcode.vue";
import html2canvas from 'html2canvas'
import * as rebNtiveBrige  from "../../request/reb_native_brige.ts"

const router = useRouter()
const route = useRoute()
const leftTetx = ref("")
const titleTest = ref("分享海报")
const color = ref<string>("#000000");
const value = ref<any>("");
const umg = ref('')
let data = reactive({
   ...route.query
});
const imageBase64 = ref('');
const divContainer = ref(null);
const captureElement = async () => {
      try {
        const canvas = await html2canvas(divContainer.value);
        imageBase64.value = canvas.toDataURL("image/png");
        // let imgUrl = canvas.toDataURL('image/png')
        // const a = document.createElement('a')
        // a.href = imgUrl
        // a.setAttribute('download','图片.png')
        // a.click()
        // console.log(imageBase64.value)
      } catch (error) {
        console.error('捕获出错:', error);
      }
};
// 动态引入js文件
const oadJS = (url:any) => {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  document.head.appendChild(script);
}
const goWx = () => {
    // console.log((window as any).deviceUtils)
    // oadJS('https://example.com/some-script.js')
    // return
    // console.log(imageBase64.value)
    (window as any).deviceUtils.shareWXImage('保单检视','','','','1',imageBase64.value)
    const ICBCName  = navigator.userAgent.includes("ICBC-AXA-REB") || navigator.userAgent.includes("ICBC-AXA-EBT")
    if(ICBCName) {
        // rebNtiveBrige.rebDownloadQR(imageBase64.value, '保单检视' )
        // window.deviceUtils.downloadQR(imageBase64.value, '保单检视')
        (window as any).deviceUtils.shareWXImage('保单检视','','','','1',imageBase64.value)
    } else {
        var obj = {
            method: 'wxSharingImages',
            data: {
                base64ImageStr: imageBase64.value,
            }
        }
        if(navigator.userAgent.indexOf("JinShiTong_iOS") !== -1){
            (window as any).webkit.messageHandlers.interactive.postMessage(obj);
        } else if (navigator.userAgent.indexOf("JinShiTong_Android")!== -1){
            //interactive 安卓端定义的类名 postMessage 安卓端定义的方法名
            (window as any).interactive.postMessage(JSON.stringify(obj))
        }
    }
}
const saveBum = () => {
    const ICBCName  = navigator.userAgent.includes("ICBC-AXA-REB") || navigator.userAgent.includes("ICBC-AXA-EBT")
    if(ICBCName) {
        // rebNtiveBrige.rebDownloadQR(imageBase64.value, '保单检视' )
        (window as any).deviceUtils.downloadQR(imageBase64.value, '保单检视')
        // window.deviceUtils.downloadQR(imageBase64.value, '保单检视' )
    } else {
        var obj = {
            method: 'ProfessionalDownload',
            data: {
                base64ImageStr: imageBase64.value,
            }
        }
        if(navigator.userAgent.indexOf("JinShiTong_iOS") !== -1){
            (window as any).webkit.messageHandlers.interactive.postMessage(obj);
        } else if (navigator.userAgent.indexOf("JinShiTong_Android")!== -1){ 
            // interactive 安卓端定义的类名 postMessage 安卓端定义的方法名
            (window as any).interactive.postMessage(JSON.stringify(obj))
        }
    }
}
onMounted(() => {
    // oadJS('http://172.20.14.114:3307/ts/reb_native_brige.ts')
    captureElement()
    if(sessionStorage.getItem('taskCode')){
        shareLink({taskCode:sessionStorage.getItem('taskCode')}).then((res: any) => {
          if (res.code == 200) {
                // umg.value = `data:image/png;base64,${res.base64}`
                value.value = res.link
            }
        })
    } else {
        value.value = data.shortUrl
    }
})

</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
.page {
    background-color: #FFFFFF;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    .generation {
        img{
            width: 90%;
            overflow: hidden;
            margin-top: 78px;
            margin-left: 5%;
            height: 530px;
        }
    }
    .content {
        width: 90%;
        margin-left: 5%;
        overflow: hidden;
        margin-top: 78px;
        .contenttop {
            width: 100%;
            height: 430px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .contentbottm {
            width: 100%;
            height: 70px;
            display: flex;
            justify-content: space-between;
            background: #f1f3f4;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            .contentbottmTopp {
                display: flex;
                .contentbottmt {
                    width: 53px;
                    height: 53px;
                    margin-top: 7px;
                    font-size: 13px;
                    margin-left: 7px;
                    color: #f9f7f7;
                    text-align: center;
                    border-radius: 3px;
                    letter-spacing: 3px;
                    background: #5d86e5;
                    div:nth-child(1){
                        margin-top: 7px;
                    }
                }
                .contentbottmc {
                    font-size: 12px;
                    margin-top: 13px;
                    margin-left: 4px;
                    text-align: left;
                    div:last-child {
                        margin-top: 7px;
                    }
                }
            }
            .contentbottmb {
                width: 53px;
                height: 53px;
                margin-top: 7px;
                margin-right: 13px;
                border-radius: 3px;
            }
        }
    }
    .cbottom {
        width: 100%;
        display: flex;
        font-size: 13px;
        margin-top: 17px;
        align-items: center;
        justify-content: center;
        .cbottomz:first-child {
            img {
                width: 35px;
                height: 35px;
            }
        }
        .cbottomz:last-child {
            img {
                width: 30px;
                height: 30px;
                margin: 0 auto;
            }
            margin-left: 90px;
        }
    }
}
</style>

